<div class="card">
  <div class="card-body border-bottom">
    <form (ngSubmit)="search()">
      <div class="d-flex align-items-center flex-wrap">
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="fleetcarNumberSearch" class="form-label mb-0 me-2 text-nowrap">车牌号:</label>
          <input type="text" id="fleetcarNumberSearch" class="form-control" style="width: 150px;" [(ngModel)]="fleetcarNumberKeyword" name="fleetcarNumberKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="driverSearch" class="form-label mb-0 me-2 text-nowrap">司机:</label>
          <input type="text" id="driverSearch" class="form-control" style="width: 150px;" [(ngModel)]="driverKeyword" name="driverKeyword">
        </div>
        <div class="me-3 mb-2 d-flex align-items-center">
          <label for="contactSearch" class="form-label mb-0 me-2 text-nowrap">联系人:</label>
          <input type="text" id="contactSearch" class="form-control" style="width: 150px;" [(ngModel)]="contactKeyword" name="contactKeyword">
        </div>
        <div class="ms-md-auto mb-2">
          <button class="btn btn-primary" type="submit"><i class="fa fa-search"></i><span>查询</span></button>
          <button class="btn btn-secondary ms-2" type="button" (click)="resetSearch()">重置</button>
        </div>
      </div>
    </form>
  </div>
 
  <div class="card-body">
    <div class="mb-2 d-flex align-items-center" style="width: 350px;">
      <label class="form-label me-2">车辆号：</label>
      <select class="form-select me-2" [(ngModel)]="dispatchVehicleNumber" name="dispatchVehicleNumber">
        <option value="">请选择车辆号</option>
        <option *ngFor="let v of vehicleNumbers" [value]="v.vehicleNumber">
          {{ v.vehicleNumber }}
        </option>
      </select>
      <button class="btn btn-success" (click)="batchDispatch()">派车</button>
    </div>
   
    <div class="table-responsive">
      <table class="table table-striped table-hover">
        <thead>
          <tr>
            <th>选择</th>
            <th>发货人</th>
            <th>发货地址</th>
            <th>收货人</th>
            <th>收货地址</th>
            <th>车号</th>
            <th>货物</th>
            <th>件数</th>
            <th>提货方式</th>
            <th>立方米</th>
            <th>重量</th>
            <th>长米</th>
            <th>宽米</th>
            <th>高米</th>
            <th>代收款金额</th>
            <th>是否等通知</th>
            <th>区域</th>
            <th>客户单号</th>
            <th>单号</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let fleetcar of filteredFleetcars">
            <td>
              <input type="checkbox" [(ngModel)]="fleetcar.selected" />
            </td>
            <td>{{ fleetcar.shipper }}</td>
            <td>{{ fleetcar.shipperAddress }}</td>
            <td>{{ fleetcar.consignee }}</td>
            <td>{{ fleetcar.consigneeAddress }}</td>
            <td>{{ fleetcar.vehicleNumber }}</td>
            <td>{{ fleetcar.goods }}</td>
            <td>{{ fleetcar.pieceCount }}</td>
            <td>{{ fleetcar.declaration }}</td>
            <td>{{ fleetcar.cubicMeterss }}</td>
            <td>{{ fleetcar.weightk }}</td>
            <td>{{ fleetcar.lengthm }}</td>
            <td>{{ fleetcar.widthm }}</td>
            <td>{{ fleetcar.heightm }}</td>
            <td>{{ fleetcar.freightAmount }}</td>
            <td>{{ fleetcar.returnRequired?'是':'否' }}</td>
            <td>{{ fleetcar.quyu }}</td>
            <td>{{ fleetcar.customerNo }}</td>
            <td>{{ fleetcar.orderNo }}</td>
            <td>
              <button class="btn btn-sm btn-primary me-1" type="button" (click)="openEditModal(fleetcar.id)">
                <i class="fa fa-eye"></i> 查看
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="card-footer">
    <div class="row">
      <div class="col-md-6">
        <div class="pagination-info" *ngIf="fleetcars.items.length > 0">
          当前显示 {{ fleetcars.totalCount > 0 ? ((list.page - 1) * currentPageSize + 1) : 0 }} - {{ Math.min(list.page * currentPageSize, fleetcars.totalCount) }} 条，总计 {{ fleetcars.totalCount }} 条
        </div>
      </div>
      <div class="col-md-6">
        <div class="d-flex justify-content-end align-items-center">
          <div class="me-3">
            <label class="me-2">每页显示：</label>
            <select class="form-select form-select-sm d-inline-block" style="width: auto;"
                    [(ngModel)]="currentPageSize"
                    (change)="onPageSizeChange(currentPageSize)">
              <option *ngFor="let size of pageSizeOptions" [value]="size">{{ size }}</option>
            </select>
          </div>
          <nav aria-label="分页导航" *ngIf="fleetcars.items.length > 0">
            <ul class="pagination pagination-sm mb-0">
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(1)">
                  <span aria-hidden="true">&laquo;&laquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === 1">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page - 1)">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <ng-container *ngFor="let page of visiblePageNumbers">
                <li class="page-item disabled" *ngIf="page < 0">
                  <span class="page-link">...</span>
                </li>
                <li class="page-item" *ngIf="page > 0" [class.active]="list.page === page">
                  <a class="page-link" href="javascript:;" (click)="goToPage(page)">{{ page }}</a>
                </li>
              </ng-container>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(list.page + 1)">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li>
              <li class="page-item" [class.disabled]="list.page === maxPageCount">
                <a class="page-link" href="javascript:;" (click)="goToPage(maxPageCount)">
                  <span aria-hidden="true">&raquo;&raquo;</span>
                </a>
              </li>
            </ul>
          </nav>
          <div class="ms-3 d-flex align-items-center" *ngIf="maxPageCount > 1">
            <span class="me-2">跳至</span>
            <input
              type="number"
              class="form-control form-control-sm"
              style="width: 60px;"
              min="1"
              [max]="maxPageCount"
              [(ngModel)]="inputPageNumber"
              (change)="onPageInputChange($event)"
              (keyup)="onPageInputKeyUp($event)"
            />
            <span class="ms-2">页</span>
            <button class="btn btn-sm btn-outline-primary ms-2" (click)="goToPage(inputPageNumber)">确定</button>
          </div>
        </div>
      </div>
    </div>
    <div *ngIf="fleetcars.items.length === 0" class="text-center">
      <p>暂无数据</p>
    </div>
  </div>
</div>
<!-- 新建/编辑车辆模态框 -->
<div class="modal fade" [class.show]="isModalOpen" [class.d-block]="isModalOpen" tabindex="-1" role="dialog" aria-modal="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">查看车辆信息</h5>
        <button type="button" class="btn-close" (click)="closeModal()" aria-label="关闭"></button>
      </div>
      <div class="modal-body">
        <form [formGroup]="createFleetcarForm">
          <div class="mb-3" *ngIf="isEditMode">
            <label class="form-label">单号</label>
            <input type="text" class="form-control" formControlName="orderNo" readonly>
          </div>
          <fieldset class="border p-2 mb-3">
            <legend class="w-auto px-2">发货人信息</legend>
            <div class="row mb-2">
              <div class="col-md-4">
                <label class="form-label"> 发货人</label>
                <input type="text" class="form-control" formControlName="shipper" readonly>
              </div>
              <div class="col-md-4">
                <label class="form-label"> 发货人地址</label>
                <input type="text" class="form-control" formControlName="shipperAddress" readonly>
              </div>
            </div>
          </fieldset>
          <fieldset class="border p-2 mb-3">
            <legend class="w-auto px-2">收货人信息</legend>
            <div class="row mb-2">
              <div class="col-md-4">
                <label class="form-label"> 收货人</label>
                <input type="text" class="form-control" formControlName="consignee" readonly>
              </div>
              <div class="col-md-4">
                <label class="form-label"> 收货人地址</label>
                <input type="text" class="form-control" formControlName="consigneeAddress" readonly>
              </div>
            </div>
          </fieldset>
          <fieldset class="border p-2 mb-3">
            <legend class="w-auto px-2">货物信息</legend>
            <div class="row mb-2">
              <div class="col-md-3">
                <label class="form-label"> 货物</label>
                <input type="text" class="form-control" formControlName="goods" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label"> 件数</label>
                <input type="number" class="form-control" formControlName="pieceCount" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label">重量(kg)</label>
                <input type="number" class="form-control" formControlName="weightk" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label">代收款金额</label>
                <input type="number" class="form-control" formControlName="freightAmount" readonly>
              </div>
            </div>
            <div class="row mb-2">
              <div class="col-md-3">
                <label class="form-label">长(m)</label>
                <input type="number" class="form-control" formControlName="lengthm" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label">宽(m)</label>
                <input type="number" class="form-control" formControlName="widthm" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label">高(m)</label>
                <input type="number" class="form-control" formControlName="heightm" readonly>
              </div>
              <div class="col-md-3">
                <label class="form-label" > 提货方式</label>
                <div>
                  <label class="me-3">
                    <input type="radio" formControlName="declaration" value="自提" disabled> 自提
                  </label>
                  <label>
                    <input type="radio" formControlName="declaration" value="送货" disabled> 送货
                  </label>
                </div>
              </div>
            </div>
          </fieldset>
          <div class="row mb-3">
            <div class="col-md-4">
              <label class="form-label"> 客户编号</label>
              <input type="text" class="form-control" formControlName="customerNo" readonly>
            </div>
            <div class="col-md-4">
              <label class="form-label" >是否回单</label>
              <div>
                <label class="me-3">
                  <input type="radio" formControlName="returnRequired" value="是" disabled> 是
                </label>
                <label>
                  <input type="radio" formControlName="returnRequired" value="否" disabled> 否
                </label>
              </div>
            </div>
          </div>
          <div class="mb-3">
            <label class="form-label" >备注</label>
            <textarea class="form-control" formControlName="remarks" rows="3" readonly></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeModal()">关闭</button>
      </div>
    </div>
  </div>
</div>